<template>
	<scroll-view>
		<view class="container">
			<!-- Toolbar -->
			<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
			<!-- Backdrop -->
			<view class="topBackrop">
				<view :style="{'padding-top':((actionBarHeight)+'px')}"></view>
				<view style="width: 100%;">
					<view style="color: #3E3B36; font-size: 28rpx; font-weight: bold;">下单须知：</view>
					<view class="uni-flex" style="width: 100%;">
						<view
							style="-webkit-flex: 1;flex: 1;color: #826D4B; font-size: 26rpx;line-height: 40rpx; margin-top: 25rpx; ">
							1.请精准填写运车的信息，价格会更加准确<br />2.专属客服给您回电，全程服务更省心</view>
						<image style="width: 105rpx;" mode="widthFix" src="@/static/ic_place_order_tips.png"></image>
					</view>
				</view>
			</view>
			<!-- 始发地 -->
			<view class="title">
				<image class="title-img" mode="widthFix" src="@/static/ic_place_order_title.png"></image>
				<view class="title-text">始发地</view>
			</view>
			<view class="place-order">
				<!-- 出发地 -->
				<view class="uni-flex place-order-item">
					<image class="place-order-image" src="@/static/ic_starting_point.png"></image>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">请选择出发地</view>
					<text class="uni-panel-icon uni-icon place-order-image">{{'&#xe470;'}}</text>
				</view>
				<!-- 目的地 -->
				<view class="uni-flex place-order-item">
					<image class="place-order-image" src="@/static/ic_end_point.png"></image>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">请选择目的地</view>
					<text class="uni-panel-icon uni-icon place-order-image">{{'&#xe470;'}}</text>
				</view>
			</view>
			<!-- 完善车辆信息 -->
			<view class="title">
				<image class="title-img" mode="widthFix" src="@/static/ic_place_order_title.png"></image>
				<view class="title-text">完善运车车辆信息 获取精准报价</view>
			</view>
			<view class="place-order">
				<!-- 车辆品牌 -->
				<view class="uni-flex place-order-item">
					<view class="place-order-text"
						style="-webkit-flex: 1;flex: 1; padding-left: 25rpx; color: #3E3B36;">车辆品牌</view>
					<view class="input" style="-webkit-flex: 1;flex: 1; ">
						<input class="input-text" placeholder="请填写车辆品牌" @focus="onFocus" @blur="onBlur" />
					</view>
				</view>
				<!-- 运车数量 -->
				<view class="uni-flex place-order-item">
					<view class="place-order-text"
						style="-webkit-flex: 1;flex: 1; padding-left: 25rpx ;color: #3E3B36;">
						运车数量
					</view>
					<view class="number-box" style="-webkit-flex: 1;flex: 2;">
						<uni-number-box :min="1" :max="9999" :value="1" background="#E6E7EE" />
					</view>
				</view>
				<!-- 车辆估值 -->
				<view class="uni-flex place-order-item">
					<view class="place-order-text"
						style="-webkit-flex: 1;flex: 1; padding-left: 25rpx; color: #3E3B36;">车辆估值</view>
					<input class="input-text"
						style="-webkit-flex: 1;flex: 1;padding-right: 0rpx; transform: translateX(5%);"
						placeholder="请填写车辆估值" type="digit" @focus="onFocus" @blur="onBlur" />
					<view class="input-unit">万元/台</view>
				</view>
				<!-- 车辆车况 -->
				<view class="uni-flex place-order-item">
					<view class="place-order-text"
						style="-webkit-flex: 1;flex: 1; padding-left: 25rpx; color: #3E3B36;">车辆车况</view>
					<view class="place-order-text"
						style="-webkit-flex: 1;flex: 1; font-weight: normal; padding-right: 0rpx;  transform: translateX(5%); color: #3E3B36; align-items: center; justify-content: flex-end;">
						能正常行驶
					</view>
					<text class="uni-panel-icon uni-icon place-order-image"
						style="padding-left: 0rpx;">{{'&#xe470;'}}</text>
				</view>
				<!-- 车辆VIN码 -->
				<view class="uni-flex place-order-item">
					<view class="place-order-text"
						style="-webkit-flex: 1;flex: 1; padding-left: 25rpx; color: #3E3B36;">车辆VIN码</view>
					<view class="input" style="-webkit-flex: 1;flex: 2;">
						<input class="input-text" placeholder="选填" @focus="onFocus" @blur="onBlur" />
					</view>
				</view>
			</view>
			<view class="next" @tap="navigateToNext">下一步</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				nvConfig: {
					title: "下单",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
					transparent: {
						initColor: "#000000",
					},
					back: {
						hide: true
					}
				},
				conditionSelect: 0,
				condition: [{
					text: '能正常行驶',
					value: 0
				}, {
					text: '不能正常行驶',
					value: 1
				}],
			}
		},
		onPageScroll(e) {
			this.$refs.nv.pageScroll(e)
		},
		computed: {
			actionBarHeight() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		methods: {
			onFocus() {
				this.$mp.page.$getAppWebview().setStyle({
					softinputNavBar: 'none'
				})
			},
			onBlur() {
				this.$mp.page.$getAppWebview().setStyle({
					softinputNavBar: 'auto'
				})
			},
			navigateToNext() {
				uni.navigateTo({
					url: '../place/PlaceOrderSubmit'
				})
			}
		},
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.css';

	page {
		background-color: $uni-bg-color-grey;
	}

	.container {
		/* #ifdef H5 */
		padding-bottom: 150rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 30rpx;
		/* #endif */
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBackrop {
		height: auto;
		display: flex;
		padding: 0rpx 30rpx;
		padding-bottom: 30rpx;
		flex-direction: column;
		justify-content: flex-end;
		background-image: linear-gradient(to bottom, #F8D849, #FFED9C);
	}

	.title {
		width: 100%;
		height: 89rpx;
		display: flex;
		align-items: center;
	}

	.title-img {
		width: 17rpx;
		margin-left: 60rpx;
	}

	.title-text {
		height: 89rpx;
		display: flex;
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-text-color;
		justify-content: center;
		align-items: center;
	}

	.place-order {
		margin-left: 25rpx;
		margin-right: 25rpx;
		padding: 0rpx 25rpx;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		box-sizing: border-box;
		align-items: center;
	}

	.place-order-item {
		margin-top: 15rpx;
		width: 100%;
		height: 88rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F6F8FA;
	}

	.place-order-image {
		width: 35rpx;
		height: 35rpx;
		padding-left: 20rpx;
		padding-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.place-order-text {
		height: 100%;
		text-align: start;
		color: rgba(88, 90, 97, 0.5);
		padding: 0rpx 6rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}

	.input {
		height: 100%;
		color: #333333;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.input-text {
		width: 100%;
		padding: 0rpx 30rpx;
		text-align: right;
		font-size: 26rpx;
		color: $uni-text-color;
	}

	.input-unit {
		padding: 0rpx 30rpx;
		text-align: right;
		font-size: 26rpx;
		color: $uni-text-color;
	}

	.number-box {
		height: 100%;
		padding: 0rpx 30rpx;
		justify-content: flex-end;
		display: flex;
		align-items: center;
	}

	.radio {
		height: 100%;
		padding: 0rpx 30rpx;
		justify-content: flex-end;
		display: flex;
		align-items: center;
	}

	.next {
		display: flex;
		justify-content: center;
		margin: 30rpx 65rpx;
		align-items: center;
		height: 90rpx;
		background-color: rgba(248, 216, 73, 1);
		border-radius: 50rpx;
		color: rgba(41, 43, 53, 1);
		font-size: 28rpx;
		font-weight: bold;
	}
</style>